<template>
  <view class="viewport">
    <fui-nav-bar isOccupy isFixed background="#0052D9" title="人员状态" color="#fff" @leftClick="leftClick" @rightClick="rightClick">
      <fui-icon color="#fff" name="arrowleft"></fui-icon>
    </fui-nav-bar>

    <view class="warp">
      <view class="head">
        <view class="ipt">
          <u--input placeholder="请输入" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
        </view>
        <view class="screen" @click="screen">
          <image class="img" src="/static/images/index/shaixuan.svg" mode=""></image>
          筛选
        </view>
      </view>

      <view class="totalWorkerStatus">
        <view class="totalWorkerStatusItem">
          <view class="fontTitle">待命中</view>
          <view class="fontdetail green">20人</view>
        </view>
        <view class="totalWorkerStatusItem">
          <view class="fontTitle">待执行</view>
          <view class="fontdetail orange">20人</view>
        </view>
        <view class="totalWorkerStatusItem">
          <view class="fontTitle">执行中</view>
          <view class="fontdetail blue">20人</view>
        </view>
      </view>

      <view style="background-color: #fff; padding: 0">
        <u-collapse @change="change" @close="close" @open="open" :border="false">
          <u-collapse-item title="维修班组一(9人)" name="Docs guide">
            <view class="table">
              <!-- 表头 -->
              <view class="table-row header">
                <text class="table-cell">姓名</text>
                <text class="table-cell">状态</text>
                <text class="table-cell">待执行</text>
                <text class="table-cell">执行中</text>
              </view>
              <!-- 数据行 -->
              <view class="table-row" v-for="(item, index) in workerList" :key="index" @click="workerDetail(item)">
                <text class="table-cell">{{ item.name }}</text>
                <text class="table-cell">{{ item.status }}</text>
                <text class="table-cell">{{ item.wait }}</text>
                <text class="table-cell">{{ item.doing }}</text>
              </view>
            </view>
          </u-collapse-item>
          <u-collapse-item title="维修班组二(9人)" name="Variety components">
            <view class="table">
              <!-- 表头 -->
              <view class="table-row header">
                <text class="table-cell">姓名</text>
                <text class="table-cell">状态</text>
                <text class="table-cell">待执行</text>
                <text class="table-cell">执行中</text>
              </view>
              <!-- 数据行 -->
              <view class="table-row" v-for="(item, index) in workerList" :key="index" @click="workerDetail(item)">
                <text class="table-cell">{{ item.name }}</text>
                <text class="table-cell">{{ item.status }}</text>
                <text class="table-cell">{{ item.wait }}</text>
                <text class="table-cell">{{ item.doing }}</text>
              </view>
            </view>
          </u-collapse-item>
          <u-collapse-item title="维修班组三(9人)" name="Numerous tools">
            <view class="table">
              <!-- 表头 -->
              <view class="table-row header">
                <text class="table-cell">姓名</text>
                <text class="table-cell">状态</text>
                <text class="table-cell">待执行</text>
                <text class="table-cell">执行中</text>
              </view>
              <!-- 数据行 -->
              <view class="table-row" v-for="(item, index) in workerList" :key="index" @click="workerDetail(item)">
                <text class="table-cell">{{ item.name }}</text>
                <text class="table-cell">{{ item.status }}</text>
                <text class="table-cell">{{ item.wait }}</text>
                <text class="table-cell">{{ item.doing }}</text>
              </view>
            </view>
          </u-collapse-item>
        </u-collapse>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue';
const workerList = reactive([
  {
    name: '张三',
    status: '待命',
    wait: 0,
    doing: 0
  },
  {
    name: '张三',
    status: '待命',
    wait: 0,
    doing: 0
  },
  {
    name: '张三',
    status: '待命',
    wait: 0,
    doing: 0
  },
  {
    name: '张三',
    status: '待命',
    wait: 0,
    doing: 0
  },
  {
    name: '张三',
    status: '待命',
    wait: 0,
    doing: 0
  },
  {
    name: '张三',
    status: '待命',
    wait: 0,
    doing: 0
  },
  {
    name: '张三',
    status: '待命',
    wait: 0,
    doing: 0
  },
  {
    name: '张三',
    status: '待命',
    wait: 0,
    doing: 0
  }
]);
const leftClick = () => {
  uni.reLaunch({
    url: '/pages/index/index'
  });
};
const rightClick = () => {};
const screen = () => {};
//去详情页
const workerDetail = (item) => {
  uni.navigateTo({
    url: '/subpkg_worker/workerDetail/workerDetail'
  });
};
</script>

<style lang="scss" scoped>
.warp {
  height: 100%;
  background-color: #f6f6f6;
  font-family: Arial, Helvetica, sans-serif;
  padding-bottom: 150rpx;

  .head {
    display: flex;
    align-items: center;
    background-color: #fff;
    height: 120rpx;
    padding: 20rpx;

    .ipt {
      flex: 1;
      margin-left: 25rpx;
      height: 100rpx;
      display: flex;
      align-items: center;
    }

    .screen {
      // width: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .img {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }
    }
  }

  .totalWorkerStatus {
    margin: 10rpx 20rpx;
    height: 200rpx;
    background-color: #fff;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .totalWorkerStatusItem {
      width: 33%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .fontTitle {
        color: #727272;
        font-size: 35rpx;
        margin-bottom: 10rpx;
      }

      .fontdetail {
        // color: #727272;
        font-size: 40rpx;
        font-weight: bold;
      }

      .green {
        color: #31c7c9;
      }

      .orange {
        color: #ffd395;
      }

      .blue {
        color: #5ab1ef;
      }
    }
  }

  .table {
    width: 100%;
    // border: 1px solid #ccc;
    border-spacing: 0;
    border-collapse: collapse;
  }

  .table-row {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #ccc;
  }

  .header {
    background-color: #f8f8f8;
    font-weight: bold;
  }

  .table-cell {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    // background-color: #fff;
  }
}
</style>
